
<%@ page import="bean.ScreeningSchedule" %>
<%@ page import="service.ScreeningScheduleService" %>
<%@ page import="bean.Movie" %>
<%@ page import="service.impl.MovieServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Seat" %>
<%@ page import="service.OrderService" %>
<%@ page import="service.OrderItemService" %>
<%@ page import="service.impl.OrderServiceImpl" %>
<%@ page import="service.impl.CinemaServiceImpl" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/seat_style.css"/>
<%--
  Created by IntelliJ IDEA.
  User: Peter Zhou
 
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购买电影票</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
        }

        .con-box {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 0 auto;
        }

        .left {
            width: 60%;
            height: 100vh;
            border-right: 1px dashed #000;
        }

        .left p {
            width: 70%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin: 30px auto;
            background-color: #f0f0f0;
            border-radius: 5px;
        }

        .seat {
            display: flex;
            width: 80%;
            height: 750px;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: space-around;
            align-content: center;
            margin: 0 auto;
        }

        .seat li {
            width: 8%;
            height: 8%;
            border-radius: 5px;
            background-color: #b9ef9f;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }

        .right {
            width: 35%;
            height: 100vh;
            color: #a79e9f;
            position: relative;
        }

        .right-con {
            width: 350px;
            height: 90vh;
            position: absolute;
            right: -30px;
            top: 55%;
            line-height: 28px;
        }

        #seatNumbers {
            width: 240px;
        }

        .seat-number {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: #efefef;
            border-radius: 5px;
            text-align: center;
            margin-left: 10px;
            margin-bottom: 10px;
            line-height: 30px;
            color: #000;
            border: #d1d1d1 1px solid;
        }

        .right-con button {
            width: 70px;
            height: 25px;
            margin: 25px 50px;
            background-color: #efefef;
            border: solid 0.5px #000;
            border-radius: 2px;
            cursor: pointer;
        }
        .screen {
            width: 800px;
            clear: both;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            font-size: 20px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        .image {
            position: relative;
            top: 80px;
            left: 150px;
        }
        .content .desc, .row {
            width: 1200px;
            height: 42px;
            text-align: center;
        }
        .content .desc {
            padding-left: 50px;
            height: 60px;
        }
        .content img {
            width: 30px;
            height: 30px;
            margin: 6px;
        }
        .content .desc img {
            width: 40px;
            height: 40px;
            margin: 10px;
            float: left;
        }
        .content .desc span {
            height: 60px;
            line-height: 60px;
            display: block;
            width: 40px;
            float: left;
        }
    </style>
    <%
        ScreeningSchedule screeningSchedule = (ScreeningSchedule)request.getSession().getAttribute("screeningSchedule");
        System.out.println(screeningSchedule);
        MovieServiceImpl movieService = new MovieServiceImpl();
        Movie movie = movieService.getMovieById(screeningSchedule.getMovie().getId());
    %>
    <script>

        var selectNum = 0;
        var selectedSeats = []; // 用于存储已选择座位的className
        var price = <%=movie.getPrice()%>;

//定义changeImg函数，用于处理座位的点击事件
        function changeImg(node) {
            //如果当前图片不是”已售“
            if (node.alt !== "sold") {
                //如果当前已选择的座位数量达到6个，并且当前座位是可用的
                if (selectNum >= 6 && node.alt === "available") {
                    alert("一次最多购买6张")
                } else {

                    //根据图片的alt属性（作为状态）来决定是选择作为还是取消选则
                    var inputNode = document.getElementsByName(node.className);//根据图片的class找到对应的Input元素
                    if (node.alt === "available") {//如果座位是可选的，则选择它
                        node.src = "../img/selected.png";//更改图片为选择的图片
                        node.alt = "selected";//更改alt属性为已选择
                        inputNode[0].value = 1;//设置对应的input的值为1，表示选择了该座位
                        selectNum++;//已选择的座位数量加1
                        selectedSeats.push(node.className);
                    } else {
                        //如果座位是已选择的，则取消选择
                        node.src = "../img/available.png";//更改图片为可用的图片
                        node.alt = "available";//更改alt属性为可用
                        inputNode[0].value = 0;//设置对应的input值为0，表示取消了该座位的选择
                        selectNum--;//已选座位数量减1
                        // 从数组中移除对应的className
                        var index = selectedSeats.indexOf(node.className);
                        if (index > -1) {
                            selectedSeats.splice(index, 1);
                        }
                    }
                    //计算总价格。并更新到页面上
                    var amount = Math.floor(price * selectNum * 100) / 100;//计算总价
                    var num = amount.toString();//将总价转化为字符串
                    var index = num.indexOf(".");//找到小数点的位置
                    //如果字符串中的没有小数点，则添加一个小数点，并设置index为字符串的长度
                    if (index < 0) {
                        index = num.length;
                        num += ".";
                    }
                    // 如果字符串长度小于小数点后两位加小数点前的长度，则在末尾添加0
                    while (num.length <= index + 2) {
                        num += "0";
                    } //更新页面上的总价格显示
                    document.getElementById("total").innerText = "￥" + num;
                }
            }
        }
        // 定义一个函数，用于检查是否选择了座位
        function checkSeat() {
            // 如果没有选择座位
            if (selectNum <= 0) {
                alert("您还未选择座位");
                return false
            } else {
                // var selectedSeatsStr = JSON.stringify(selectedSeats);
                // 将 selectedSeats 数组转换为逗号分隔的字符串
                var selectedSeatsStr = selectedSeats.join(',');
                // 将字符串设置为隐藏输入字段的值
                document.getElementById("selectedSeatsInput").value = selectedSeatsStr;
                return true;
            }
        }
    </script>

</head>
<body>
<div class = "content" >
<div class="con-box">
<%--    <p>电影名：<%=movie.getName()%>></p>--%>
<%--    <img src="../img/movie<%=movie.getImg()%>>" alt="描述图片的文字"class="image" width="280" height="330">--%>
<%--    <div class="desc" style="display: block">--%>
        <img class="desc_img" src="../img/available.png"><span>可选</span>
        <img class="desc_img" src="../img/sold.png"><span>已售</span>
        <img class="desc_img" src="../img/selected.png"><span>已选</span>
    <p class="amount">共计:&nbsp;</p>
    <p id="total">0元</p>
    <img class="image" src="../img/movie/<%=movie.getImg()%>">
    <p>电影名：<%=movie.getName()%></p>
    <p>影院：<%=new CinemaServiceImpl().getCinemaById(screeningSchedule.getVideoHall().getCinemaId()).getName()%></p>
    <p>影院位置：<%=new CinemaServiceImpl().getCinemaById(screeningSchedule.getVideoHall().getCinemaId()).getAddress()%></p>
    <p>放映厅：<%=screeningSchedule.getVideoHall().getName()%>
    <p>放映编号：<%=screeningSchedule.getId()%></p>

    </div>

        <p class="screen">屏幕</p>
<% List<List<Seat>> rowSeats = new ArrayList<>();
    for (int i = 1; i <= screeningSchedule.getVideoHall().getRow() ; i++) {
        List<Seat> seats = new ArrayList<>();
        for (int j = 1; j <= screeningSchedule.getVideoHall().getColumn() ; j++) {
            Seat seat = new Seat();
            seat.seat = i + "_" + j;
            seat.sold = new OrderServiceImpl().isSeatSold(screeningSchedule.getId(), seat.seat);
            seats.add(seat);
        }
        rowSeats.add(seats);
    }
    request.setAttribute("seats",rowSeats);
%>
    <div class="seat_area">
        <form action="order" method="post" onsubmit="return checkSeat()">
    <c:forEach var="rowSeats" items="${seats}">
        <div class="row">
            <c:forEach var="seat" items="${rowSeats}">
                <img src="${seat.sold ? "../img/sold.png" : "../img/available.png"}" alt="${seat.sold ? "sold" : "available"}" class="${seat.seat}" onclick="changeImg(this)">
                <input name="${seat.seat}" value="${seat.seat}" type="hidden">
            </c:forEach>
        </div>
    </c:forEach>
            <p class="sub"><input type="submit" value="确定选座" class="submit"></p>
            <input type="hidden" id="selectedSeatsInput" name="selectedSeats">
        </form>
    </div>
    </form>
    </div>

   </div>
</div>
</body>

</html>
